<template>
  <div class="trace">
    <Left-menus active="6"></Left-menus>
    <div class="trace-main" v-if="show0">
      <div class="header">
        <img src="@/assets/images/smile.png" alt />
        <div>
          <h1>欢迎使用布鲁克商城溯源服务！</h1>
          <p>轻松使用区块链为商品赋能，实现来可追、去可查，提升品牌价值，保障消费者权益。</p>
        </div>
      </div>
      <div>
        <div class="manage">
          <h3>订阅管理</h3>
          <div class="present">
            <div class="present-server">当前服务</div>
            <i class="el-icon-help"></i>
            <p>{{form.serviceName}}</p>
            <span>
              {{form.expTime*1000 | dateforday}}
              <b>到期</b>
            </span>
          </div>
        </div>
        <div class="configuration">
          <div class="configuration-main">
            <div class="content">
              <h3>选择配置</h3>
              <span class="content-config">
                <div v-for="item in bageService" :key="item.id">
                  <p
                    @click="payment(item)"
                    :class="pay==item.type?'active':''"
                    v-if="item.type >= serviceType"
                  >
                    <span>{{item.name}}</span>
                    <span class="dui" v-if="pay==item.type">
                      <i class="el-icon-check"></i>
                    </span>
                  </p>
                </div>
              </span>
            </div>
            <div class="time">
              <h3>订购时长</h3>
              <div class="time-radio">
                <el-radio v-model="radio" :label="1" @click.native.prevent="onRadioChange(1)">1个月</el-radio>
                <el-radio v-model="radio" :label="3" @click.native.prevent="onRadioChange(3)">3个月</el-radio>
                <el-radio v-model="radio" :label="6" @click.native.prevent="onRadioChange(6)">6个月</el-radio>
                <el-radio v-model="radio" :label="12" @click.native.prevent="onRadioChange(12)">12个月</el-radio>
              </div>
            </div>
            <div class="content">
              <h3>账户配额</h3>
              <div class="tab-pane_p">
                <p>
                  <span class="tab-pane_span">商品种类：</span>
                  <el-input-number
                    v-model="form.brand"
                    :min="disForm.brand || 0"
                    @change="changeCAT"
                  ></el-input-number>
                  <b>种（{{categoryPrice}} CAT/种）</b>
                </p>
                <p>
                  <span class="tab-pane_span">溯源码：</span>
                  <el-input-number
                    v-model="form.code"
                    :min="disForm.totalCode || 0"
                    @change="changeCAT"
                  ></el-input-number>
                  <b>个（{{codePrice}} CAT/个）</b>
                </p>
                <p>
                  <span class="tab-pane_span">存储空间：</span>
                  <el-input-number
                    v-model="form.storage"
                    :min="disForm.storage || 0"
                    @change="changeCAT"
                  ></el-input-number>
                  <b>G（{{capacityPrice}} CAT/G）</b>
                </p>
              </div>
            </div>
          </div>
          <div class="foot">
            <p>
              费用：
              <b>{{totalCAT}}</b> CAT
            </p>
            <el-button type="primary" @click="goToPay" v-if="overdue==false">下一步</el-button>
            <el-button type="primary" @click="goToPay" v-if="overdue==true && radio">下一步</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog
      title="选择支付方式"
      :visible.sync="dialogVisible"
      width="30%"
      class="coll-dialog"
      top="25vh"
    >
      <span class="coll-dialog_way">
        <el-radio v-model="radio1" label="1">
          <span class="coll-dialog_pay">
            账户余额
            <b>支付 {{}} CAT</b>
          </span>
        </el-radio>
        <el-radio v-model="radio1" label="2">支付宝</el-radio>
        <el-radio v-model="radio1" label="3">微信</el-radio>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取 消</el-button>
        <el-button type="text" style="color:rgba(0, 186, 173, 1);" @click="goBuy">购 买</el-button>
      </span>
    </el-dialog>-->
    <transition name="el-fade-in-linear">
      <div v-if="!show0">
        <div class="main">
          <div class="order-top">
            <h3>确认订单</h3>
            <div class="order-class">
              <div class="order-serveConfig">
                <p>服务配置：</p>
                <span>{{serviceName}}</span>
              </div>
              <div class="order-serveConfig">
                <p>存储空间：</p>
                <span>{{form.storage}}G</span>
              </div>
              <div class="order-serveConfig">
                <p>商品种类：</p>
                <span>{{form.brand}}种</span>
              </div>
              <div class="order-serveConfig">
                <p>订购时长：</p>
                <span>{{mounth}}个月</span>
              </div>
              <div class="order-serveConfig">
                <p>溯源码：</p>
                <span>{{form.code}}个</span>
              </div>
              <div class="order-serveConfig">
                <p>费用：</p>
                <span>{{totalCAT1}} {{pay1?(pay1==1?'CAT':'元'):'CAT'}}</span>
              </div>
            </div>
          </div>
          <div class="coll-dialog2">
            <h3>支付方式</h3>
            <span class="coll-dialog_way" v-if="text1">
              <p @click="payment1(1)" :class="pay1==1?'active':''">
                <img src="../../../assets/images/icon_yue.png" alt />
                <span>账户余额</span>
                <span class="dui" v-if="pay1==1">
                  <i class="el-icon-check"></i>
                </span>
              </p>
              <p @click="payment1(2)" :class="pay1==2?'active':''">
                <img src="../../../assets/images/icon_zhifubao.png" alt />
                <span>支付宝</span>
                <span class="dui" v-if="pay1==2">
                  <i class="el-icon-check"></i>
                </span>
              </p>
              <p @click="payment1(3)" :class="pay1==3?'active':''">
                <img src="../../../assets/images/icon_weixin.png" alt />
                <span>微信</span>
                <span class="dui" v-if="pay1==3">
                  <i class="el-icon-check"></i>
                </span>
              </p>
            </span>
            <span class="coll-dialog_way" v-else>
              <p class="active">
                <img src="../../../assets/images/icon_yue.png" alt />
                <span>{{pay1==1?"账户余额":(pay1==2?"支付宝":"微信")}}</span>
                <span class="dui">
                  <i class="el-icon-check"></i>
                </span>
              </p>
            </span>
          </div>
          <div class="footer">
            <div class="coll-dialog_foot">
              <el-checkbox v-model="radio2">
                同意
                <span style="color:#76D4CE;">《布鲁克商城服务协议》</span>
              </el-checkbox>
            </div>
            <div class="btn-foot">
              <el-button @click="show0 = true" v-if="text1">返回</el-button>
              <el-button type="primary" @click="paymentIn" v-if="text1">支付</el-button>
              <el-button type="primary" @click="paymentOut" v-else>继续支付</el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <el-dialog
      :visible.sync="dialogVisible0"
      width="285px"
      class="coll-dialog1"
      top="25vh"
      center="center"
      title="扫码支付"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <span class="coll-dialog1_way" v-loading="loading">
        <img width="200" height="200" :src="imgurl" alt />
      </span>
      <span slot="footer" class="dialog-footer">
        <div class="footer-text">
          <p>
            请用
            <b>{{text}}</b> 扫描二维码完成支付
            <br />完扫描支付后，若没有自动跳转
          </p>
          <span>请联系客服</span>
        </div>
        <div class="nopay-btn my-btn">
          <el-button @click="cancelTraceServiceOrder" :disabled="disabled0">取消支付</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LeftMenus from "@/views/components/TraceaLeftmenus";
import sm2Encrypt from "@/lib/sm2";
import { KEY, Add } from "@/utils/service";
import { MOUTN } from "@/utils/AES";
export default {
  data() {
    return {
      dialogVisible0: false,
      dialogVisible: false,
      form: {
        serviceName: "",
        expTime: "",
        brand: "",
        code: "",
        storage: "",
      },
      disForm: {
        category: "",
        code: "",
        capacity: "",
        buyCategory: "",
        buyCode: "",
        buyCapacity: "",
        brand: "",
        totalCode: "",
        storage: "",
      },
      checkList: [],
      show: true, // 认证状态
      upDate: true, //升级配置
      activeName: "first",
      activeName1: "first",
      radio: null,
      radio1: "1",
      password: null,
      overdue: true,
      tracer: "支付成功!",
      pay: null,
      pay1: 1,
      bageService: [],
      text: "",
      invalid: "",
      serviceType: "",
      totalCAT: 0,
      totalCAT1: 0,
      categoryPrice: null,
      capacityPrice: null,
      codePrice: null,
      show0: true,
      text1: true,
      radio2: false,
      overdue: true,
      imgurl: "",
      disabled: "",
      transactionId: "",
      loading: false,
      ratePrice: null,
      mounth: null,
      disabled0: false,
      serviceName: "",
      payLoading: false,
      serviceId: null,
    };
  },
  async created() {
    // console.log(sm2Encrypt("1234567", KEY + MOUTN, 0));
    // console.log(this.getMounth(1571328000000));
    this.raceServiceOrder();
    await this.getAllTraceService();
    await this.getBuyTraceServ();
    this.getCatCnyRate();
  },
  methods: {
    async getCatCnyRate() {
      const res = await this.axios.getCatCnyRate();
      this.ratePrice = res.data.data.ratePrice;
    },
    async raceServiceOrder() {
      this.payLoading = this.$loading({
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(225,225, 225, 0.7)",
      });
      const res = await this.axios.raceServiceOrder();
      this.payLoading.close();
      if (res.data.data.payStatus) {
        if (res.data.data.payStatus == 1) {
          this.show0 = false;
          let data = res.data.data;
          this.serviceName = data.sourceName;
          this.form.storage = Add(data.buyCapacity, data.capacity);
          this.form.brand = Add(data.buyCategory, data.category);
          this.form.code = Add(data.buyCode, data.code);
          this.mounth = data.purchaseTime || 0;
          this.totalCAT1 = data.payMoney;
          this.imgurl = data.qrcode;
          this.text1 = false;
          if (data.payType == 1) {
            this.text = "CAT Wallet";
            this.pay1 == 1;
          } else if (data.payType == 2) {
            this.text = "支付宝";
            this.pay1 == 2;
          } else if (data.payType == 3) {
            this.text = "微信";
            this.pay1 == 3;
          }
          this.radio2 = true;
          this.transactionId = data.transactionId;
        } else if (res.data.data.payStatus == 2) {
          this.$router.push("/traceability");
        }
      }
    },
    async getBuyTraceServ() {
      const res = await this.axios.getBuyTraceServ();
      if (res.data.code == 200) {
        let data = res.data.data;
        this.invalid = data.invalid;
        this.serviceId = data.serviceId;
        this.serviceType = this.pay = data.serviceType;
        this.categoryPrice = this.bageService[this.pay - 1].categoryPrice;
        this.capacityPrice = this.bageService[this.pay - 1].capacityPrice;
        this.codePrice = this.bageService[this.pay - 1].codePrice;
        this.serviceName = data.serviceName;
        this.disForm = {
          category: data.category,
          code: data.code,
          capacity: data.capacity,
          buyCategory: data.buyCategory,
          buyCode: data.buyCode,
          buyCapacity: data.buyCapacity,
          brand: Add(data.buyCategory, data.category),
          totalCode: Add(data.buyCode, data.code),
          storage: Add(data.buyCapacity, data.capacity),
        };
        this.form = {
          serviceName: data.serviceName,
          expTime: data.expTime,
          brand: Add(this.disForm.buyCategory, this.disForm.category),
          code: Add(this.disForm.buyCode, this.disForm.code),
          storage: Add(this.disForm.buyCapacity, this.disForm.capacity),
        };
        if (data.expTime * 1000 < new Date().getTime()) {
          this.overdue = true;
          this.totalCAT = this.bageService[this.pay - 1].monthPrice;
          this.radio = 1;
        } else {
          this.overdue = false;
          this.radio = null;
          this.totalCAT = 0;
        }
      }
    },
    async getAllTraceService() {
      const res = await this.axios.getAllTraceService();
      this.bageService = res.data.data;
    },
    async cancelTraceServiceOrder() {
      // 取消支付
      let sm2 = sm2Encrypt(this.transactionId, KEY + MOUTN, 0);
      const res = await this.axios.cancelTraceServiceOrder({
        transactionId: sm2,
      });
      if (res.data.code == 200) {
        this.$message({
          message: "已取消",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.show0 = true;
            this.text1 = true;
            this.dialogVisible0 = false;
          },
        });
      } else if (res.data.code == 33001) {
        this.message({
          type: "warning",
          message: res.data.message,
          duration: 1500,
          onClose: () => {
            this.$router.push("/traceability");
          },
        });
      } else if (res.data.code == 33003) {
        this.$router.go(0);
      } else {
        this.$message.warning(res.data.message);
        this.dialogVisible0 = false;
      }
    },
    async upgradeTraceService() {
      // 订阅溯源服务
      let obj = {
        serviceId: this.serviceId, // 溯源服务配置主键
        payType: this.pay1, // 支付类型 1：账户余额（CAT）2：支付宝（CNY） 3：微信（CNY）
        purchaseTime: this.radio || 0, //  购买时长（单位：月）
        buyCategory: this.form.brand - this.disForm.brand, //  购买-商品种类数量（单位：种)
        buyCode: this.form.code - this.disForm.totalCode, // 购买-溯源码数量（单位：个）
        buyCapacity: this.form.storage - this.disForm.storage, // 购买-存储空间（单位G）,
        totalMoney: this.totalCAT1, // 支付金额（校验使用）
      };
      let sm2 = sm2Encrypt(JSON.stringify(obj), KEY + MOUTN, 0);
      this.loading = true;
      this.imgurl = "";
      this.disabled0 = true;
      console.log(KEY + MOUTN);
      const res = await this.axios.upgradeTraceService({ data: sm2 });
      this.payLoading.close();
      if (res.data.code == 200) {
        this.dialogVisible0 = true;
        this.imgurl = res.data.data.qrcode;
        this.transactionId = res.data.data.transactionId;
        this.disabled0 = false;
        this.loading = false;
      } else if (res.data.code == 33002) {
        this.$message({
          message: res.data.message,
          type: "warning",
          duration: 2000,
          onClose: () => {
            this.$router.go(0);
          },
        });
      } else {
        this.$message.warning(res.data.message);
      }
    },
    payment(item) {
      // 服务切换
      this.serviceId = item.id;
      this.serviceName = item.name;
      this.pay = item.type;
      this.disForm.category = item.category;
      this.disForm.code = item.code;
      this.disForm.capacity = item.capacity;
      (this.disForm.brand = this.form.brand = Add(
        this.disForm.buyCategory,
        this.disForm.category
      )),
        (this.disForm.totalCode = this.form.code = Add(
          this.disForm.buyCode,
          this.disForm.code
        )),
        (this.disForm.storage = this.form.storage = Add(
          this.disForm.buyCapacity,
          this.disForm.capacity
        ));
      this.categoryPrice = this.bageService[this.pay - 1].categoryPrice;
      this.capacityPrice = this.bageService[this.pay - 1].capacityPrice;
      this.codePrice = this.bageService[this.pay - 1].codePrice;
      let all = Add(
        Add(
          (this.form.brand - this.disForm.brand) * this.categoryPrice,
          (this.form.code - this.disForm.totalCode) * this.codePrice
        ),
        (this.form.storage - this.disForm.storage) * this.capacityPrice
      );
      if (this.overdue)
        return Add(all, this.bageService[this.pay - 1].monthPrice) * this.radio;
      this.totalCAT = Add(
        Add(
          all,
          (this.bageService[this.pay - 1].monthPrice -
            this.bageService[this.serviceType - 1].monthPrice) *
            this.getMounth(this.form.expTime * 1000)
        ),
        this.bageService[this.pay - 1].monthPrice * this.radio
      );
    },
    payment1(index) {
      this.pay1 = index;
      if (index != 1) {
        this.totalCAT1 = this.totalCAT * this.ratePrice;
      } else {
        this.totalCAT1 = this.totalCAT;
      }
    },
    changeCAT() {
      let all = Add(
        Add(
          (this.form.brand - this.disForm.brand) * this.categoryPrice,
          (this.form.code - this.disForm.totalCode) * this.codePrice
        ),
        (this.form.storage - this.disForm.storage) * this.capacityPrice
      );
      if (this.overdue)
        return Add(all, this.bageService[this.pay - 1].monthPrice) * this.radio;
      this.totalCAT = Add(
        Add(
          all,
          (this.bageService[this.pay - 1].monthPrice -
            this.bageService[this.serviceType - 1].monthPrice) *
            this.getMounth(this.form.expTime * 1000)
        ),
        this.bageService[this.pay - 1].monthPrice * this.radio
      );
    },
    goToPay() {
      if (!this.totalCAT) return this.$message.warning("请选择配置");
      this.show0 = false;
      this.totalCAT1 = this.totalCAT;
      this.mounth = this.radio || 0;
    },
    goBuy() {
      this.dialogVisible = false;
      this.dialogVisible0 = true;
      if (this.radio1 == "1") {
        this.text = "CAT Wallet";
      } else if (this.radio1 == "2") {
        this.text = "支付宝";
      } else if (this.radio1 == "3") {
        this.text = "微信";
      }
    },
    onRadioChange(e) {
      // 选择月份
      if (this.radio === e) {
        this.radio = null;
      } else {
        this.radio = e;
      }
      let all = Add(
        Add(
          (this.form.brand - this.disForm.brand) * this.categoryPrice,
          (this.form.code - this.disForm.totalCode) * this.codePrice
        ),
        (this.form.storage - this.disForm.storage) * this.capacityPrice
      );
      if (this.overdue)
        return Add(all, this.bageService[this.pay - 1].monthPrice) * this.radio;
      this.totalCAT = Add(
        Add(
          all,
          (this.bageService[this.pay - 1].monthPrice -
            this.bageService[this.serviceType - 1].monthPrice) *
            this.getMounth(this.form.expTime * 1000)
        ),
        this.bageService[this.pay - 1].monthPrice * this.radio
      );
    },
    paymentIn() {
      if (!this.pay1) return this.$message.warning("请选择支付方式");
      if (!this.radio2) return this.$message.warning("请勾选服务协议");
      this.payLoading = this.$loading({
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(225,225, 225, 0.7)",
      });
      this.upgradeTraceService();
      if (this.pay1 == 1) {
        this.text = "CAT Wallet";
      } else if (this.pay1 == 2) {
        this.text = "支付宝";
      } else if (this.pay1 == 3) {
        this.text = "微信";
      }
    },
    paymentOut() {
      //
      if (!this.pay) return this.$message.warning("请选择支付方式");
      if (!this.radio1) return this.$message.warning("请勾选服务协议");
      this.dialogVisible0 = true;
      if (this.pay == 1) {
        this.text = "CAT Wallet";
      } else if (this.pay == 2) {
        this.text = "支付宝";
      } else if (this.pay == 3) {
        this.text = "微信";
      }
    },
    getTime(t) {
      // 格式化时间
      var date = new Date(t);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      return year + "-" + month + "-" + day;
    },
    getMounth(t) {
      // 剩余时间计算
      let nowYear = this.getTime(new Date()).split("-")[0];
      let nowMonth = this.getTime(new Date()).split("-")[1];
      let nowDay = this.getTime(new Date()).split("-")[2];
      let endYear = this.getTime(t).split("-")[0];
      let endMonth = this.getTime(t).split("-")[1];
      let endDay = this.getTime(t).split("-")[2];
      if (endYear < nowYear) {
        return 0;
      }
      if (endYear == nowYear) {
        // 相同年、不同月
        if (endMonth > nowMonth) {
          if (endDay > nowDay) {
            return (endYear - nowYear) * 12 + (endMonth - nowMonth) + 1;
          }
          return (endYear - nowYear) * 12 + (endMonth - nowMonth);
        }
        // 相同年、相同月
        if (endMonth == nowMonth) {
          if (endDay > nowDay) {
            return (endYear - nowYear) * 12 + (endMonth - nowMonth) + 1;
          }
          return 0;
        }
        return 0;
      }
      if (endDay > nowDay) {
        return (endYear - nowYear) * 12 + (endMonth - nowMonth) + 1;
      }
      return (endYear - nowYear) * 12 + (endMonth - nowMonth);
    },
  },
  components: {
    LeftMenus,
  },
};
</script>

<style lang="scss" scoped>
.trace {
  display: flex;
  justify-content: center;
  .trace-main {
    width: 960px;
    padding: 10px;
    background-color: #fff;
    .header {
      padding: 10px 0 10px 25px;
      background-color: rgba(91, 198, 187, 1);
      color: #fff;
      line-height: 30px;
      display: flex;
      align-items: center;
      img {
        margin-right: 25px;
      }
    }
    .manage {
      padding: 25px 30px;
      line-height: 30px;
      border-bottom: 1px solid #ddd;
      h3 {
        padding-left: 15px;
        border-left: 4px solid #5bc6bb;
        line-height: 20px;
      }
      .present {
        width: 264px;
        height: 232px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(212, 212, 212, 1);
        border-radius: 10px;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        i {
          font-size: 38px;
          color: #ffb31a;
        }
        p {
          margin: 15px 0;
        }
        span {
          color: #999;
          font-size: 20px;
          b {
            font-weight: normal;
            font-size: 14px;
          }
        }
        .present-server {
          width: 69px;
          height: 28px;
          background: rgba(91, 198, 187, 1);
          border-radius: 14px 0px 0px 14px;
          color: #fff;
          text-align: center;
          line-height: 28px;
          position: absolute;
          top: 16px;
          right: 0;
          font-size: 14px;
        }
      }
    }
    .configuration {
      margin-top: 15px;
      padding-left: 30px;
      .configuration-main {
        display: flex;
        flex-wrap: wrap;
      }
      .content {
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        width: 50%;
        .content-config {
          margin-top: 20px;
          display: flex;
          min-height: 100px;
          flex-wrap: wrap;
          p {
            width: 150px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(212, 212, 212, 1);
            opacity: 1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            margin-right: 20px;
            .dui {
              border: 20px solid #5bc6bb;
              border-bottom-color: transparent;
              border-left-color: transparent;
              position: absolute;
              top: 0;
              right: 0;
              i {
                position: absolute;
                top: -12px;
                right: -16px;
                color: #fff;
              }
            }
          }
          .active {
            background: rgba(91, 198, 187, 0.1);
          }
          p:hover {
            border: 1px solid rgba(91, 198, 187, 1);
          }
        }
        p {
          font-size: 16px;
        }
        /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
          border-bottom-color: #e4e7ed;
          color: #fff;
          background-color: rgba(118, 212, 206, 1);
        }
        /deep/ .el-tabs__item:hover {
          color: #303133;
        }
        /deep/ .el-tabs__item {
          padding: 0 30px;
          height: 30px;
          line-height: 30px;
        }
        .tab-pane_p {
          margin-top: 15px;
          p {
            font-size: 15px;
            margin-bottom: 10px;
            .tab-pane_span {
              display: inline-block;
              min-width: 80px;
            }
            b {
              font-weight: normal;
              color: #999;
            }
          }
          /deep/ .el-input-number {
            line-height: 28px;
            margin-right: 8px;
            .el-input-number__decrease {
              width: 30px;
              background: #fff;
              border: 0;
              border-radius: 50% 0 0 50%;
            }
            .el-input-number__increase {
              width: 30px;
              background: #fff;
              border-radius: 0 50% 50% 0;
              border: 0;
            }
          }
          /deep/ .el-input-number:hover .el-input__inner {
            border-color: #76d4ce;
          }
          /deep/ .el-input-number:hover i {
            color: #76d4ce;
          }
          /deep/ .el-input {
            .el-input__inner {
              height: 30px;
              line-height: 30px;
              padding: 0 8px;
              border-radius: 15px;
              background-color: rgb(243, 243, 243);
            }
            .el-input__inner:focus {
              border-color: #76d4ce;
            }
          }
        }
      }
      .time {
        width: 50%;
        h3 {
          margin-bottom: 15px;
        }
        /deep/ .el-radio__input.is-checked .el-radio__inner {
          border-color: #5bc6bb;
          background: #5bc6bb;
        }
        /deep/ .el-radio__inner:hover {
          border-color: #5bc6bb;
        }
        /deep/ .el-radio__input.is-checked + .el-radio__label {
          color: #5bc6bb;
        }
      }
      .foot {
        padding: 20px 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 50px;
        p {
          margin-right: 25px;
        }
        /deep/ .el-button--primary {
          background-color: rgba(118, 212, 206, 1);
          border-color: rgba(118, 212, 206, 1);
          padding: 10px 30px;
        }
        /deep/ .el-button:active {
          background-color: rgb(15, 184, 172);
        }
      }
    }
  }
  .coll-dialog {
    /deep/ .el-button--text {
      color: #101010;
    }
    /deep/ .el-radio__input.is-checked + .el-radio__label {
      color: #101010;
    }
    .coll-dialog_way {
      display: flex;
      flex-direction: column;
      min-height: 100px;
      justify-content: space-around;
    }
    .coll-dialog_pay {
      b {
        width: 80%;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .coll-dialog1 {
    /deep/ .el-dialog__body {
      padding: 10px 25px 0;
    }
    /deep/ .el-dialog__footer {
      padding: 0;
    }
    p {
      line-height: 35px;
    }
    .footer-text {
      padding: 10px 20px 0;
    }
    .coll-dialog1_way {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dialog-footer {
      line-height: 22px;
      span {
        display: inline-block;
        margin-bottom: 15px;
        color: #58b6b0;
        cursor: pointer;
        width: 120px;
        height: 30px;
        line-height: 30px;
        opacity: 1;
        border-radius: 6px;
      }
      .nopay-btn {
        text-align: center;
        padding: 7px 0;
        background-color: #ddd;
        /deep/ .el-button {
          padding: 7px 15px;
          width: 88px;
        }
      }
    }
  }
  .time-radio {
    /deep/
      .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
      .el-radio__inner {
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
  .main {
    min-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    padding: 25px;
    h2 {
      color: rgba(16, 16, 16, 1);
      padding-left: 25px;
      border-left: 4px solid #5bc6bb;
      margin-bottom: 25px;
    }
    .order-top {
      .order-class {
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        .order-serveConfig {
          display: flex;
          width: 50%;
          color: #ccc;
          margin-bottom: 10px;
          p {
            min-width: 80px;
          }
          span {
            color: #333;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .coll-dialog_foot {
        /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #333;
        }
        /deep/ .is-checked .el-checkbox__inner {
          background-color: #5bc6bb;
          border-color: #5bc6bb;
        }
        /deep/ .el-checkbox__inner:hover {
          border-color: #5bc6bb;
        }
        /deep/ .is-focus .el-checkbox__inner {
          border-color: #5bc6bb;
        }
      }
      .btn-foot {
        display: flex;
        justify-content: center;
        /deep/ .el-button {
          width: 150px;
        }
        /deep/ .el-button--default:active {
          color: #76d4ce;
          border-color: #76d4ce;
          background-color: #ccf7f4;
          outline: 0;
        }
        /deep/ .el-button--default:hover,
        .el-button--default:focus {
          color: #76d4ce;
          border-color: #aaddda;
        }
        /deep/ .el-button + .el-button {
          margin-left: 55px;
        }
        /deep/ .el-button--primary {
          background-color: #76d4ce;
          border-color: #76d4ce;
        }
        /deep/ .el-button--primary.is-active,
        .el-button--primary:active {
          background-color: #58b6b0;
          border-color: #58b6b0;
        }
      }
    }
    .coll-dialog2 {
      margin-top: 30px;
      .coll-dialog_way {
        margin-top: 20px;
        display: flex;
        min-height: 100px;
        p {
          width: 180px;
          height: 50px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(212, 212, 212, 1);
          opacity: 1;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          img {
            width: 20px;
            margin-right: 8px;
          }
          .dui {
            border: 20px solid #5bc6bb;
            border-bottom-color: transparent;
            border-left-color: transparent;
            position: absolute;
            top: 0;
            right: 0;
            i {
              position: absolute;
              top: -12px;
              right: -16px;
              color: #fff;
            }
          }
        }
        .active {
          background: rgba(91, 198, 187, 0.1);
        }
        p + p {
          margin-left: 20px;
        }
        p:hover {
          border: 1px solid rgba(91, 198, 187, 1);
        }
      }
      .coll-dialog_pay {
        b {
          width: 80%;
          display: inline-block;
          text-align: right;
          color: #333;
        }
      }
    }
    .content {
      display: flex;
      padding-bottom: 20px;
      p {
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
      }
      /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav,
      /deep/ .el-tabs--card > .el-tabs__header {
        border: 0;
      }
      /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border: 0;
        border-top: 3px solid #5bc6bb;
        color: #333;
        background-color: #fff;
      }
      /deep/ .el-tabs__item:hover {
        color: #303133;
      }
      /deep/ .el-tabs__item {
        text-align: center;
        width: 140px;
        box-sizing: border-box;
        background-color: #fbfbfb;
        border: 1px solid #e4e7ed;
      }
      .tab-pane_p {
        height: 330px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        b {
          color: #00baad;
          font-size: 16px;
        }
        p {
          font-size: 16px;
          width: 300px;
          height: 50px;
          border: 1px solid rgba(91, 198, 187, 1);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            margin-right: 5px;
            margin-top: 2px;
          }
          span {
            font-size: 22px;
            color: #f56c6c;
            margin-right: 5px;
          }
        }
      }
    }
    .time {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        margin-right: 15px;
        font-size: 16px;
      }
      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #5bc6bb;
        background: #5bc6bb;
      }
      /deep/ .el-radio__inner:hover {
        border-color: #5bc6bb;
      }
      /deep/ .el-radio__input.is-checked + .el-radio__label {
        color: #5bc6bb;
      }
    }
  }
}
</style>